<template>
  <div class="hotelDetail">
      <div class="main">
          <!-- 头部组件 -->
          <top 
          :hotelData="hotelData"/>
          <!-- 酒店产品组件 -->
          <products
          :productsData="hotelData.products"/>
          <!-- 酒店地图组件 -->
          <detailMap
          :location="hotelData.location"
          :hotelName="hotelData.name"/>
          <!-- 酒店中间部分组件 -->
          <detailCenter
          :hotelData="hotelData"/>
          <!-- 引入底部组件 -->
          <detailFooter
          :hotelData="hotelData"/>
      </div>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=f8245ea0cc0ef1352e3f1acd8048036a"></script>
    <!-- <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> -->
  </div>
</template>

<script>
// 引入头部组件
import top from '@/components/hotel/detailTop'
// 引入酒店产品组件
import products from '@/components/hotel/detailProducts'
// 引入酒店中间部分组件
import detailCenter from '@/components/hotel/detailCenter'
// 引入底部组件
import detailFooter from '@/components/hotel/detailFooter'
// 引入地图组件
import detailMap from '@/components/hotel/detailMap'
export default {
    components: {
        top,
        products,
        detailCenter,
        detailFooter,
        detailMap
    },
    data(){
        return{
            hotelId: '',
            hotelData: {
                city: {},
                products: [],
                scores: {},
                location: {}
            }
        }
    },
    methods: {
        async initData(){
            let pro = await this.$store.dispatch('hotel/searchHotelsData',{ id: this.hotelId })
            let initHotelData = await pro();
            let {data:{data}} =initHotelData;
            this.hotelData = data[0];
            console.log(this.hotelData.name);
        }
    },
    mounted(){
        let { hotelId } = this.$route.query;
        this.hotelId = hotelId
        this.initData();
    },
    beforeRouteEnter(to,from,next){
        next(vm => {
            if(vm.$route.query.hotelId){
                return true;
            }else{
                vm.$router.push('/hotel');
            }
        })
    }
}
</script>

<style scoped lang="less">
    .hotelDetail{
        .main{
            width: 1000px;
            margin: 0 auto;
            margin-bottom: 50px;
        }
    }
</style>